<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../asset/css/common.css">
    <link rel="stylesheet" href="../../asset/css/pageStyle.css">
    <link rel="stylesheet" href="../../asset/css/style.css">
    <script src="../../asset/js/avalon.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <title>产品详情</title>
</head>
<body>
<ms-header></ms-header>
<div class="container" ms-controller="proContent">
    <div class="breadCrumbs">
        <span><a href="../index/index.html">首页</a> > <a href="../index/serviceSupport/index.html">服务与支持</a> > <a
                href="./index.html">产品中心</a>> </span><span class="current">产品详情</span>
    </div>
    <div class="detail">
        <div class="proInfo">
            <div class="proLeft">
                <div class="proImg">
                    <img ms-attr="{src: @proDetaiData.imageUrl[0]}" alt="">
                    <ul>
                        <li ms-for="(index,el) in @smallImg"><img ms-attr="{src: el}| src" alt=""></li>
                        <!--<li><img src="../../asset/images/lock.png" alt=""></li>
                        <li><img src="../../asset/images/lock.png" alt=""></li>-->
                    </ul>
                </div>
            </div>
            <div class="baseInfo">
                <p class="name" ms-html="@proDetaiData.name">ADEL US99 家庭大门指纹防盗锁(指纹+12键密码+感应卡)</p>
                <div class="userPlace">
                    <p>适用场所：</p>
                    <span ms-for="el in @proDetaiData.placeName" ms-html="el">家庭大门</span><!--<span>家庭大门</span><span>家庭大门</span><span>家庭大门</span>-->
                </div>
                <div class="colour">
                    <p>可选颜色：</p>
                    <ul>
                        <li ms-for="el in @proDetaiData.colourName">
                            <span ms-class="[el=='古铜色'?'gts':(el=='土豪金'?'thj':(el=='亚铬色'?'ygs':(el=='黑色'?'hs':'')))]"></span><span ms-html="el">古铜色</span>
                        </li>
                        <!--<li>
                            <span class="thj"></span><span>土豪金</span>
                        </li>
                        <li>
                            <span class="ygs"></span><span>亚铬色</span>
                        </li>-->
                    </ul>
                </div>
                <div class="unlockType">
                    <p>开锁方式：</p>
                    <ul>
                        <li ms-class="[el=='指纹'?'icon-fingerprint':(el=='扫码'?'icon-lock':(el=='刷卡'?'icon-car':(el=='钥匙'?'icon-key':'hidden')))]" ms-for="el in @proDetaiData.unlockTypeName"></li>
                        <!--<li class="icon-lock"></li>
                        <li class="icon-car"></li>
                        <li class="icon-key"></li>-->
                    </ul>
                </div>
                <div class="btns">
                    <button class="select">前往购买</button>
                    <button ms-click="goContactUs()">联系我们</button>
                </div>
                <!--<ul>
                    <li ms-html="@proDetaiData.name">ADEL US99 家庭大门指纹防盗锁(指纹+12键密码+感应卡)</li>
                    <li ms-html="@proDetaiData.tips">当天可发货，指纹门锁，防盗锁</li>
                    <li><span ms-html="@proDetaiData.newPrice">1499.00元</span>
                        <del ms-html="@proDetaiData.oldPrice">￥1599.00元</del>
                    </li>
                </ul>
                <div class="color">
                    <p class="proAttrName" ms-html="@proDetaiData.chooseColour.title">选择颜色</p>
                    <ul class="attrValue">
                        <li ms-for="el in @proDetaiData.chooseColour.color" ms-html="el">三合一（金色）</li>
                        &lt;!&ndash;<li>三合一（金色）</li>
                        <li>三合一（金色）</li>
                        <li>三合一（金色）</li>
                        <li>三合一（金色）</li>
                        <li>三合一（金色）</li>&ndash;&gt;
                    </ul>
                </div>
                <div class="direction">
                    <p class="proAttrName" ms-html="@proDetaiData.chooseDirect.title">选择方向</p>
                    <ul class="attrValue">
                        <li ms-for="el in @proDetaiData.chooseDirect.direct">左侧开</li>
                        &lt;!&ndash;<li>右侧开</li>&ndash;&gt;
                    </ul>
                </div>
                <div class="quantity">
                    <p class="proAttrName">选择数量</p>
                    <div>
                        <span class="icon-less"></span>
                        <input type="number">
                        <span class="icon-add2"></span>
                    </div>
                </div>
                <div class="buyInfo">
                    <div>
                        <span>ADEL 爱迪尔 US99指纹防盗门电子密码锁 刷卡感应锁 滑盖智能门锁 </span><span>  三合一（咖啡铜色）</span><span ms-html="@proDetaiData.newPrice"> 1499.00元   </span><span>   数量 1</span>
                    </div>
                    <p><span>单价：</span><span ms-html="@proDetaiData.newPrice">1499元</span></p>
                </div>
                <div class="btns">
                    <a class="select" href="#">立即购买</a>
                    <a href="#"><span class="icon-shoppingCar"></span>加入购物车</a>
                </div>
                <div class="tips">
                    <span class="icon-green_right"></span><span ms-html="@proDetaiData.promise">支持7天无理由退货</span>
                </div>
                <div class="landmark">
                    <span class="icon-landmark"></span><span ms-html="@proDetaiData.address">广东省 深圳市 宝安区 松柏路 南岗第二工业区</span><a>修改</a>
                </div>-->
            </div>
        </div>
        <div class="breadCrumbs">
            <span>产品详情</span>
        </div>
        <ul class="imgList">
            <li ms-html="@proDetaiData.content"></li>
            <!--<li><img src="../../asset/images/detail_05.png" alt=""></li>
            <li><img src="../../asset/images/detail_07.png" alt=""></li>
            <li><img src="../../asset/images/detail_08.png" alt=""></li>
            <li><img src="../../asset/images/detail_09.png" alt=""></li>-->
        </ul>
        <!--<div class="addCompare"><span class="icon-select_box"></span><span>加入对比</span></div>
        <div class="comparePro">
            <div class="title">
                <p>对比中的产品（4/5）</p>
                <div><span class="icon-circle_less"></span><span class="icon-close"></span></div>
            </div>
            <div class="proList">
                <div class="panel" ms-for="el in @proDetaiData.comparePro">
                    <img src="../../asset/images/lock.png" ms-attr="{src: el.img}" alt="">
                    <span class="icon-close"></span>
                    <div class="text">
                        <p ms-html="el.name">智能指纹锁</p>
                        <p ms-html="el.price">￥1099.00元</p>
                    </div>
                </div>
                &lt;!&ndash;<div class="panel">
                    <img src="../../asset/images/lock.png" alt="">
                    <span class="icon-close"></span>
                    <div class="text">
                        <p>智能指纹锁</p>
                        <p>￥1099.00元</p>
                    </div>
                </div>
                <div class="panel">
                    <img src="../../asset/images/lock.png" alt="">
                    <span class="icon-close"></span>
                    <div class="text">
                        <p>智能指纹锁</p>
                        <p>￥1099.00元</p>
                    </div>
                </div>
                <div class="panel">
                    <img src="../../asset/images/lock.png" alt="">
                    <span class="icon-close"></span>
                    <div class="text">
                        <p>智能指纹锁</p>
                        <p>￥1099.00元</p>
                    </div>
                </div>
                <div class="panel">
                    <img src="../../asset/images/lock.png" alt="">
                    <span class="icon-close"></span>
                    <div class="text">
                        <p>智能指纹锁</p>
                        <p>￥1099.00元</p>
                    </div>
                </div>&ndash;&gt;
                <div class="btns">
                    <button>开始对比</button>
                    <button><span class="icon-delete"></span><span>清空全部</span></button>
                </div>
            </div>

        </div>
        <div class="proDetail">
            <p class="proDetailName" ms-html="@proDetaiData.proDetail.title">商品详情</p>
            <ul>
                <li>
                    <span ms-html="@proDetaiData.proDetail.brand">品牌：ADEL/爱迪尔</span>
                    <span ms-html="@proDetaiData.proDetail.model">型号：US99</span>
                </li>
                <li ms-html="@proDetaiData.proDetail.color">饰面颜色: 三合一(亮金色) 三合一(亮铬色) 三合一(红古铜色) 三合一(咖啡铜色) 四合一(亮金色) 四合一(亮铬色) 四合一(红古铜色) 四合一(咖啡铜色)</li>
                <li ms-html="@proDetaiData.proDetail.material">面板及执手材质: 锌合金</li>
                <li ms-html="@proDetaiData.proDetail.power">电源类型: 4节AA电池供电，可使用应急外接电源</li>
                <li ms-html="@proDetaiData.proDetail.electronic">电子类型: 感应锁 密码锁 指纹锁</li>
                <li ms-html="@proDetaiData.proDetail.storage">数据存储类型: 离线</li>
            </ul>
        </div>
        <div class="img">
            <img ms-attr="{src: @proDetaiData.proDetail.proDetailImg}" alt="">
            <video src="/i/movie.ogg">
                your browser does not support the video tag
            </video>
        </div>
        <div class="relatedPro">
            <p class="proDetailName" ms-html="@proDetaiData.relatedPro.title">相关商品</p>
            <div class="pannel" ms-for="el in @proDetaiData.relatedPro.proList">
                <img ms-attr="{src: el.img}" alt="">
                <div class="text">
                    <p ms-html="el.name">智能指纹锁</p>
                    <p ms-html="el.price">￥1099元</p>
                </div>
            </div>
            &lt;!&ndash;<div class="pannel">
                <img src="../../asset/images/lock.png" alt="">
                <div class="text">
                    <p>智能指纹锁</p>
                    <p>￥1099元</p>
                </div>
            </div>
            <div class="pannel">
                <img src="../../asset/images/lock.png" alt="">
                <div class="text">
                    <p>智能指纹锁</p>
                    <p>￥1099元</p>
                </div>
            </div>
            <div class="pannel">
                <img src="../../asset/images/lock.png" alt="">
                <div class="text">
                    <p>智能指纹锁</p>
                    <p>￥1099元</p>
                </div>
            </div>
            <div class="pannel">
                <img src="../../asset/images/lock.png" alt="">
                <div class="text">
                    <p>智能指纹锁</p>
                    <p>￥1099元</p>
                </div>
            </div>&ndash;&gt;
        </div>
        <div class="topReviews">
            <p class="proDetailName" ms-html="@proDetaiData.topComments[0].title">热门评论</p>
            <div class="pannel" ms-for="el in @proDetaiData.topComments[0].commentsList">
                <div class="userName">
                    <div class="name">
                        <span ms-html="el.userName">andy</span>
                        <span ms-html="el.time">2017-6-29 12:00</span>
                    </div>
                    <span ms-for="label in el.labels" ms-html="label">商品包装好看</span>
                    &lt;!&ndash;<span>外观漂亮</span>&ndash;&gt;
                </div>
                <p class="reviews" ms-html="el.usersay">第一次购买爱迪尔门锁，质量好的没的说，期望平台能有更多的活动优惠。</p>
                <div class="starImg">
                    <div class="star">
                        <ul>
                            <li ms-for="start in el.starts">
                                <span ms-html="start.title">包装</span>
                                <span class="icon-star" ms-for="s in start.startList"></span>
                                &lt;!&ndash;<span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>&ndash;&gt;
                            </li>
                           &lt;!&ndash; <li>
                                <span>外观</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>
                            <li>
                                <span>师傅服务</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>
                            <li>
                                <span>送货速度</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>&ndash;&gt;
                        </ul>
                    </div>
                    <div class="imgList">
                        <ul>
                            <li ms-for="img in el.thumbnails"><img ms-attr="{src: img}" alt=""></li>
                            &lt;!&ndash;<li><img src="../../asset/images/lock.png" alt=""></li>
                            <li><img src="../../asset/images/lock.png" alt=""></li>
                            <li><img src="../../asset/images/lock.png" alt=""></li>&ndash;&gt;
                        </ul>
                    </div>
                </div>
                <div class="reply">
                    <div class="pannel">
                        <p class="ava"></p>
                        <div>
                            <span>官方回复</span>
                            <span>感谢您对爱迪尔的信任</span>
                        </div>
                    </div>
                    <div class="pannel">
                        <p class="icon-user"></p>
                        <div>
                            <span>官方回复</span>
                            <span>感谢您对爱迪尔的信任</span>
                        </div>
                    </div>
                </div>
            </div>
            &lt;!&ndash;<div class="pannel">
                <div class="userName">
                    <div class="name">
                        <span>andy</span>
                        <span>2017-6-29 12:00</span>
                    </div>
                    <span>商品包装好看</span>
                    <span>外观漂亮</span>
                </div>
                <p class="reviews">第一次购买爱迪尔门锁，质量好的没的说，期望平台能有更多的活动优惠。</p>
                <div class="starImg">
                    <div class="star">
                        <ul>
                            <li>
                                <span>包装</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>
                            <li>
                                <span>外观</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>
                            <li>
                                <span>师傅服务</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>
                            <li>
                                <span>送货速度</span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                                <span class="icon-star"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="imgList">
                        <ul>
                            <li><img src="../../asset/images/lock.png" alt=""></li>
                            <li><img src="../../asset/images/lock.png" alt=""></li>
                            <li><img src="../../asset/images/lock.png" alt=""></li>
                            <li><img src="../../asset/images/lock.png" alt=""></li>
                        </ul>
                    </div>
                </div>
                <div class="reply">
                    <div class="pannel">
                        <p class="ava"></p>
                        <div>
                            <span>官方回复</span>
                            <span>感谢您对爱迪尔的信任</span>
                        </div>
                    </div>
                    <div class="pannel">
                        <p class="icon-user"></p>
                        <div>
                            <span>官方回复</span>
                            <span>感谢您对爱迪尔的信任</span>
                        </div>
                    </div>
                </div>
            </div>&ndash;&gt;
        </div>-->
    </div>
    <ms-service></ms-service>
</div>
<ms-footer></ms-footer>
<script src="../../asset/js/jquery-2.1.4.js"></script>
<script src="../../asset/js/ajaxUtils.js"></script>
<script src="../../asset/js/ff/ff.res.js"></script>
<script src="../../asset/js/common.js"></script>
<script src="../../asset/js/component.js"></script>
<script src="../../asset/js/front-engine.js"></script>
<script src="../../asset/js/ff/ff.res.js"></script>
<script src="./js/content.js"></script>
</body>
</html>